import * as React from "react";
import { createRoot } from "react-dom/client";

// 1、createContext的本质就是产生一个普通对象，比如说NameContext = React.createContext("")，里面有个Provider属性
// 2、在fiber树的构建过程中、就会对这个对象里面的_currentValue属性进行赋值
// 3、在被NameContext.Provider包裹的子组件里面，我们使用React.useContext(NameContext)，就可以拿到NameContext._currentValue的值

const NameContext = React.createContext("");
const AgeContext = React.createContext("");

function Child() {
  const name = React.useContext(NameContext);
  // const age = React.useContext(AgeContext);
  return <h1>{name}</h1>;
}
function App() {
  const [name, setName] = React.useState("a");
  // const [age, setAge] = React.useState("1");
  return (
    <div>
      <button
        onClick={() => {
          setName(name + "a");
        }}
      >
        setName
      </button>
      {/* <button
        onClick={() => {
          setAge(age + "1");
        }}
      >
        setAge
      </button> */}
      {/* <NameContext.Provider value={name}>
        <AgeContext.Provider value={age}>
          <Child />
        </AgeContext.Provider>
      </NameContext.Provider> */}
      <NameContext.Provider value={name}>
        <Child />
      </NameContext.Provider>
    </div>
  );
}
let element = <App />;
console.log(element);
const root = createRoot(document.getElementById("root"));
root.render(element);
